<template>
    <div class="main">
        <div class="left">
            <div class="left-top">
                <div class="left-top-item" v-for="(item, index) in 5" :key="index">朝用</div>
            </div>
            <div class="left-middle">
                <div class="left-middle-item" v-for="(item, index) in 5" :key="index">
                    <div class="ll">实验</div>
                    <div class="lr">九六式</div>
                </div>
            </div>
            <div class="left-bottom">
                <div class="left-bottom-item" v-for="(item, index) in 5" :key="index">
                    <div class="tip">
                        <div class="tip-item" v-for="(k, i) in 3" :key="i">蛇皮怪</div>
                    </div>
                    <div class="desc">
                        <div class="desc-item" v-for="(k, i) in 2" :key="i">爸爸啦啦啦呵呵呵啦啦啦啦哈哈哈哈</div>
                    </div>

                </div>
            </div>
        </div>
        <div class="middle">
            <div class="midlle-one com">夏氏宗谱</div>
            <div class="midlle-two com">卷八</div>
            <div class="midlle-three com">床前明月光疑是地上霜</div>
            <div class="midlle-four com">{{ props.data.tangHao }}</div>
        </div>
        <div class="right left">
            <div class="left-top">
                <div class="left-top-item" v-for="(item, index) in 5" :key="index">朝用</div>
            </div>
            <div class="left-middle">
                <div class="left-middle-item" v-for="(item, index) in 5" :key="index">
                    <div class="ll">实验</div>
                    <div class="lr">九六式</div>
                </div>
            </div>
            <div class="left-bottom">
                <div class="left-bottom-item" v-for="(item, index) in 5" :key="index">
                    <div class="tip">
                        <div class="tip-item" v-for="(k, i) in 3" :key="i">蛇皮怪</div>
                    </div>
                    <div class="desc">
                        <div class="desc-item" v-for="(k, i) in 2" :key="i">爸爸啦啦啦呵呵呵啦啦啦啦哈哈哈哈</div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive } from 'vue'
const props = defineProps({
    data: Object
})
</script>
<style lang="scss" scoped>
.main {
    display: flex;
    border: 5px solid #000;
    margin-bottom: 20px;

    .left {
        flex: 4;

        .left-bottom {
            display: flex;
            align-items: center;
            justify-content: space-around;
            font-size: 18px;
            padding: 20px;

            .left-bottom-item:last-child {
                border: none;
                margin: 0;
            }

            .left-bottom-item {
                display: flex;
                border-right: 2px solid #000;
                margin-right: 20px;
                padding: 20px 5px;

                .desc {
                    display: flex;
                    align-items: center;

                    .desc-item {
                        writing-mode: vertical-lr;
                        // margin: 0 20px;
                    }
                }
            }

            .tip {
                display: flex;
                flex-direction: column;
                align-items: center;

                .tip-item {
                    margin: 10px 0;
                    writing-mode: vertical-lr;
                }
            }
        }

        .left-top {
            padding: 20px;

            display: flex;
            align-items: center;
            border-bottom: 1px solid #000;
            padding-bottom: 20px;

            .left-top-item {
                margin: 0 30px;
                writing-mode: vertical-lr;
                font-size: 18px;
            }
        }

        .left-middle {
            display: flex;
            align-items: center;
            border-bottom: 1px solid #000;
            padding-bottom: 20px;
            margin-top: 20px;

            .left-middle-item {
                display: flex;
                align-items: center;
                margin: 0 20px;

                .ll {
                    font-size: 23px;
                    font-weight: 900;
                    margin-right: 10px;
                }

                .lr {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border: 1px solid #000;
                    padding: 20px 3px;
                    text-align: center;
                    font-size: 15px;
                }
            }
        }
    }

    .middle {
        flex: 1;
        border-left: 1px solid #000;
        border-right: 1px solid #000;
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-direction: column;

        .com {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            writing-mode: vertical-lr;
            font-size: 23px;
            border-bottom: 1px solid #000;
            padding: 10px 0;

        }

        .midlle-one {}

        .midlle-two {}

        .midlle-three {}

        .midlle-four {
            border: none;
        }
    }

    .right {
        flex: 4;
    }
}
</style>